<template>
	<!-- Vue ECharts 组件的模板 -->
	<div>
	  <!-- 绑定ECharts组件，并传入option和样式 -->
	  <v-chart ref="chart" :option="chartOption" style="width: 100%; height: 250px;"></v-chart>
	</div>
  </template>
  
  <script>
  import { defineComponent, ref, onMounted } from 'vue';
  import { use } from 'echarts/core'; // 引入ECharts核心函数
  import { CanvasRenderer } from 'echarts/renderers'; // 引入渲染器
  import { LineChart } from 'echarts/charts'; // 引入图表类型
  import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components'; // 引入组件
  import VChart from 'vue-echarts'; // 引入Vue ECharts组件
  import axios from 'axios'; // 引入axios
  
  // 注册所需的ECharts模块
  use([
	CanvasRenderer,
	LineChart,
	GridComponent,
	TooltipComponent,
	TitleComponent,
	LegendComponent
  ]);
  
  export default defineComponent({
	components: {
	  VChart
	},
	setup() {
	  const chart = ref(null); // Vue ref用于保存ECharts实例
	  const chartOption = ref({
		// 设置图表大小，占满整个容器
		grid: {
			left: '10%',
			right: '5%',
			top: '10%',
			bottom: '20%',
		},
		// 添加图例配置
		legend: {
			bottom: 0, // 将图例放在图表下方
			data: ['链路1', '链路2'], // 图例项的名称
			textStyle: {
				color: '#fff', // 图例文字颜色
				fontSize: 16, // 图例文字大小
				fontWeight: 'bold',
			},
		},
		tooltip: {
		  trigger: 'axis', // 提示框触发类型
		  formatter: function (params) { // 提示框的格式化函数
			const date = new Date(params[0].name); // 根据名称解析时间
			let month = (date.getMonth()+1).toString().padStart(2, '0');
			let ddate = date.getDate().toString().padStart(2, '0');
			let hours = date.getHours().toString().padStart(2, '0');
			let minutes = date.getMinutes().toString().padStart(2, '0');
			let seconds = date.getSeconds().toString().padStart(2, '0');
			let tooltipContent = date.getFullYear() + "/" + month + "/" + ddate + " " + hours + ":" + minutes + ":" + seconds;
			params.forEach(param => {
			  tooltipContent += `<br/>${param.seriesName}: ${param.value[1]} Mb`; // 显示日期和值并加上单位
			});
			return tooltipContent;
		  },
		  axisPointer: {
			animation: false // 关闭指示器的动画效果
		  }
		},
		xAxis: {
			type: 'time', // X轴类型为时间
			splitLine: {
				show: false // 不显示分隔线
			},
			axisLabel: {
				formatter: function (value) {
					const date = new Date(value);
					let minutes = date.getMinutes().toString().padStart(2, '0');
					let seconds = date.getSeconds().toString().padStart(2, '0');
					return `${minutes}:${seconds}`;
				},
				textStyle: {
					color: '#fff', // 字体颜色
					fontSize: 12, // 字体大小
					fontWeight: 'bold', // 字体粗细，可以是 'normal', 'bold', 'bolder', 'lighter'，或者数字
					fontStyle: 'italic', // 字体样式，可以是 'normal', 'italic', 'oblique'
				},
			},
		},
		yAxis: {
		  type: 'value', // Y轴类型为值
		  boundaryGap: [0, '100%'], // 从0到最大值的百分比
		  splitLine: {
			show: true // 显示分隔线
		  },
		  axisLabel: {
			formatter: '{value} Mb', // 在Y轴标签上添加单位Mb
			textStyle: {
				color: '#fff',
				fontSize: 12,
				fontWeight: 'bold',
				fontStyle: 'italic',
			},
		  }
		},
		series: [
		  {
			name: '链路1', // 数据系列1名称
			type: 'line', // 线性图表类型
			showSymbol: false, // 不显示数据点的符号
			smooth: true, // 平滑曲线
			data: [], // 初始化数据为空
			itemStyle: {
			  color: '#18FFFF' // 线条颜色
			},
			lineStyle: {
			  width: 5 // 线条宽度
			}
		  },
		  {
			name: '链路2', // 数据系列2名称
			type: 'line', // 线性图表类型
			showSymbol: false, // 不显示数据点的符号
			smooth: true, // 平滑曲线
			data: [], // 初始化数据为空
			itemStyle: {
			  color: 'red' // 线条颜色
			},
			lineStyle: {
			  width: 5 // 线条宽度
			}
		  }
		]
	  });
  
	  // 获取数据的函数
	  async function fetchData() {
		try {
		  const [response1, response2] = await Promise.all([
			axios.get('http://10.112.38.20:39898/get_rates/1'),
			axios.get('http://10.112.38.20:39898/get_rates/2')
		  ]);
		  const fetchedValues1 = response1.data;
		  const fetchedValues2 = response2.data;
		  const now = new Date();
		  const newData1 = fetchedValues1.map((value, index) => {
			const time = new Date(now.getTime() - (fetchedValues1.length - 1 - index) * 1000);
			return {
			  name: time.toString(),
			  value: [
				time.toISOString(),
				value
			  ]
			};
		  });
		  const newData2 = fetchedValues2.map((value, index) => {
			const time = new Date(now.getTime() - (fetchedValues2.length - 1 - index) * 1000);
			return {
			  name: time.toString(),
			  value: [
				time.toISOString(),
				value
			  ]
			};
		  });
  
		  // 获取最大值
		  const maxDataValue = Math.max(...fetchedValues1, ...fetchedValues2);
		  const roundedMax = Math.ceil(maxDataValue / 10) * 10;
  
		  if (chart.value) {
			chart.value.setOption({
			  yAxis: {
				max: roundedMax // 设置Y轴最大值，增加一些间隙
			  },
			  series: [
				{
				  data: newData1
				},
				{
				  data: newData2
				}
			  ]
			});
		  }
		} catch (error) {
		  console.error('Failed to fetch data:', error);
		}
	  }
  
	  // 组件挂载时执行的逻辑
	  onMounted(() => {
		fetchData(); // 初始获取数据
		setInterval(fetchData, 2000); // 每2秒获取一次数据
	  });
  
	  return {
		chartOption, // 返回图表配置项
		chart // 返回ECharts实例引用
	  };
	}
  });
  </script>
  
  <style scoped>
  </style>
  